import React, { Component } from 'react'

import PubSub from 'pubsub-js'

import axios from 'axios'

import './index.css'

export default class Header extends Component {
    // search
    search = ()=>{
        const { keyWordElement:{value:keyWord} } = this
        // 发送请求之前更改state数据
        // this.props.updateAppState({ isFirst:false,isLoading:true })
        PubSub.publish('handelChageState',{ isFirst:false,isLoading:true })
        axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
            response => { 
                // this.props.updateAppState({ isLoading:false,users:response.data.items })
                PubSub.publish('handelChageState',{ isLoading:false,users:response.data.items })
            },
            error=>{ 
                // this.props.updateAppState({ isLoading:false,err:error.message })
                PubSub.publish('handelChageState',{ isLoading:false,err:error.message })
            })
    }


    render() {
        return (
            <div className="header_search">
                <h3>Search Github Users</h3>
                <div>
                    <input ref={ c => this.keyWordElement = c } type="text" placeholder="enter the name you search" />&nbsp;&nbsp;
                    <button onClick={ this.search }>Search</button>
                </div>
            </div>
        )
    }
}
